const activeA = document.querySelector('.active')//获取学生按钮元素
const listTbody = document.querySelector('.list')//获取tbody元素
const openModal = document.querySelector('#openModal')//获取新增按钮元素
const modal = new bootstrap.Modal('#modal')//获取模态框dom元素
const btn = document.querySelector('#submit')
const province = document.querySelector('select[name=province]')
const city = document.querySelector('select[name=city]')
const county = document.querySelector('select[name=county]')
const from = document.querySelector('#submit')
const tbody = document.querySelector('tbody')

// 发送请求.获取数据
async function getStudens() {
    const res = await axios({
        url: '/students'
    }).then(res => {
        console.log(res.data);
        // 数据渲染
        listTbody.innerHTML = res.data.map(v => {
            return `
                <tr>
                      <td>${v.name}</td>
                      <td>${v.age}</td>
                      <td>${v.gender === 0 ? '男' : "女"}</td>
                      <td>第${v.group}组</td>
                      <td>${v.hope_salary}</td>
                      <td>${v.salary}</td>
                      <td>${v.province + v.city + v.area}</td>
                      <td>
                        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id=${v.id}></i></a>
                        <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id=${v.id}></i></a>
                      </td>
                    </tr>
                `
        }).join('')
        document.querySelector('.total').innerHTML = res.data.length
        console.log(res.data.length);
    })

}
getStudens()
//给新增按钮绑定点击事件
openModal.addEventListener('click', function (e) {
    //点击新增 弹出模态框
    modal.show()
    document.querySelector('.modal-title').innerText = '添加牛马学员'

})
// 编辑
// 用事件委托的方式触发 删除和编辑
tbody.addEventListener('click', async function (e) {
    e.preventDefault()
    let res
    if (e.target.classList.contains('bi-pen')) {
        modal.show()
        document.querySelector('.modal-title').innerText = '修改牛马学员'
        const id = e.target.dataset.id
        res = await axios({ url: `/students/${id}` })
        // const { data } = res.data
        for (const key in res.data) {
            // console.log(data);
            const fe = document.querySelector(`[name=${key}]`)
            if (fe && key !== 'gender') {
                fe.value = res.data[key]
            }
        }
        await Ccity()
        await Aarea()
        document.querySelector(`[name=gender][value='${res.data.gender}']`).checked = true

        if (document.querySelector('.modal-title').innerText = '修改牛马学员') {
            btn.onclick = async function (e) {
                const data = serialize(form, { hash: true, empty: true })
                for (const key in data) {
                    if (!isNaN(+data[key])) {
                        data[key] = +data[key]
                    } else {
                        data[key] = data[key]
                    }
                }
                res = await axios({ url: `/students/${id}`, method: 'put', data })
                modal.hide()
                getStudens()
            }
        }
    } else if (e.target.classList.contains('bi-trash')) {
        const id = e.target.dataset.id
        if (confirm('您确定删除吗？')) {
            res = await axios({ url: `/students/${id}`, method: 'delete' })
            getStudens()
        }
    }

})

// 新增
btn.onclick = async function (e) {
    e.preventDefault()
    const data = serialize(form, { hash: true, empty: true })
    for (const key in data) {
        if (!isNaN(+data[key])) {
            data[key] = +data[key]
        } else {
            data[key] = data[key]
        }
    }
    const res = await axios({
        url: '/students',
        method: 'post',
        data
    })

    modal.hide()
    getStudens()
}




// 获取省
async function Pprovince(province = '') {
    const res = await axios({
        url: '/api/province',
    })
    // const { data } = res.data
    document.querySelector('[name=province]').innerHTML = res.data.map((i) => {
        return `<option value="${i}">${i}</option>`
    }).join('')
    if (province !== '') document.querySelector('[name=province]').value = province;
}
// Pprovince()

// 获取市
async function Ccity(city = '') {
    const pname = document.querySelector('[name=province]').value
    const res = await axios({
        url: '/api/city',
        params: {
            pname
        }
    })
    // const { data } = res.data
    // 遍历data 市的数据
    document.querySelector('[name=city]').innerHTML = res.data.map((i) => {
        return `<option value="${i}">${i}</option>`
    }).join('')
    if (city !== '') document.querySelector('[name=province]').value = city;
}

// 获取区
async function Aarea(area = '') {
    // 获取省的值
    const pname = document.querySelector('[name=province]').value
    // 获取市的值
    const cname = document.querySelector('[name=city]').value
    // console.log('ppp', pname);
    const res = await axios({
        url: '/api/area',
        params: {
            pname,
            cname
        }
    })
    // const { data } = res.datalog
    document.querySelector('[name=area]').innerHTML = res.data.map((i) => {
        return `<option value="${i}">${i}</option>`
    }).join('')
    if (area !== '') document.querySelector('[name=area]').value = area;
}
async function Sselect() {
    await Pprovince()
    await Ccity()
    await Aarea()
}
// 调用渲染省市区
Sselect()
// 省市区联动  绑定 change事件
document.querySelector('[name=province]').addEventListener('change', async function () {
    await Ccity()
    await Aarea()
})
// 市区联动  绑定 change事件
document.querySelector('[name=city]').addEventListener('change', async function () {
    await Aarea()
})